<!-- eslint-disable no-undef -->
<script setup lang="ts">
import { loginByOpenId, bindQQMobile } from '@/services/user'
import { codeRule, mobileRule } from '@/utils/validate'
import { useGetCode } from '@/composables'
import { useUserStore } from '@/stores'
import { showSuccessToast } from 'vant'

const store = useUserStore()
const mobile = ref('')
const code = ref('')
const { sendCode, time, formRef } = useGetCode(mobile, 'bindMobile')
const bind = ref(false)
const openId = ref('')
onMounted(() => {
  console.log(window.QC.Login.check()) // 是否扫码登录成功
  window.QC.Login.getMe(async (id: string) => {
    console.log(id)
    openId.value = id
    // 需要携带openId发送请求 检验数据库中是否有openId记录
    try {
      const res = await loginByOpenId({ openId: id, source: 'qq' })
      console.log('登录成功, 存储个人信息', res)
      // 2. 存储用户信息
      store.setUser(res.data)
      showSuccessToast('三方登录成功')
      // 3. 跳转用户页面 /user
      router.push((store.URL as string) || '/user')
      store.setURL('')
    } catch (error) {
      console.log('登录失败, 绑定手机后点击登录')
      bind.value = true
    }
  })
})
const router = useRouter()
// 绑定手机号给QQ
const submit = async () => {
  // 1. 发送请求
  const res = await bindQQMobile({
    mobile: mobile.value,
    code: code.value,
    openId: openId.value
  })
  // console.log(res.data)
  // 2. 存储用户信息
  store.setUser(res.data)
  // 3.提示
  showSuccessToast('绑定成功')
  // 4. 跳转用户页面 /user
  router.push((store.URL as string) || '/user')
  store.setURL('')
}
</script>
<template>
  <div class="login-page" v-if="bind">
    <cp-nav-bar></cp-nav-bar>
    <div class="login-head">
      <h3>手机绑定</h3>
    </div>
    <van-form autocomplete="off" ref="formRef" @submit="submit">
      <van-field
        name="mobile"
        v-model="mobile"
        placeholder="请输入手机号"
        :rules="mobileRule"
      ></van-field>
      <van-field
        v-model="code"
        name="code"
        :rules="codeRule"
        placeholder="请输入验证码"
      >
        <template #button>
          <span class="btn-send" :class="{ active: time }" @click="sendCode">{{
            time ? `${time}s后发送` : '获取验证码'
          }}</span>
        </template>
      </van-field>
      <div class="cp-cell">
        <van-button
          style="margin-top: 50px"
          block
          round
          type="primary"
          native-type="submit"
        >
          立即绑定
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="scss" scoped>
.login {
  &-page {
    padding-top: 46px;
  }
  &-head {
    display: flex;
    padding: 30px 30px 50px;
    justify-content: space-between;
    align-items: flex-end;
    line-height: 1;
    h3 {
      font-weight: normal;
      font-size: 24px;
    }
    a {
      font-size: 15px;
    }
  }
  &-other {
    margin-top: 60px;
    padding: 0 30px;
    .icon {
      display: flex;
      justify-content: center;
      img {
        width: 36px;
        height: 36px;
        padding: 4px;
      }
    }
  }
}
.van-form {
  padding: 0 14px;
  .cp-cell {
    height: 52px;
    line-height: 24px;
    padding: 14px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .van-checkbox {
      a {
        color: var(--cp-primary);
        padding: 0 5px;
      }
    }
  }
  .btn-send {
    color: var(--cp-primary);
    &.active {
      color: rgba(22, 194, 163, 0.5);
    }
  }
}
</style>

<!-- 
  项目中接入了三方登录
  1. 以QQ为例, 需要在QQ互联中 用公司的QQ做认证  提交公司的审核资质 组织机构代码  营业执照 备案的域名, 回跳的地址 (运维同事在做)
  2. 等待审核通过 
  3. 需要认证  创建应用  得到appId 
  4. 使用腾讯提供的SDK包做三方登录了
  5. 核心
      1. 项目中引入SDK包 并且配置appid和回调地址
      2. 准备一个按钮  QC.Login测试登录 默认弹出新的扫码的窗口  默认QQ登录图标需要自定制
      3. 审查元素获取到url  单独设置这个地址给a链接的href  PC扫码  移动端 唤起QQ App应用
      4. 扫码登录成功后 可以 QC.Login.getMe((openId)=>{})
      5. 写到openId 向服务器发送请求 验证openId是否在后端有记录   如果有 说明QQ是被绑定过手机号的  直接跳转到项目页面中
      6. 检测不到openId记录 展示绑定手机号的页面 绑定完手机号 携带openId发送请求 将绑定好的手机号和openId存储到数据库中
 -->
